<template>
  <div class="wechatPayment-page">
    <el-breadcrumb separator=">">
      <el-breadcrumb-item>财务中心</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/cost' }">费用中心</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/equip-identity-fee' }">设备识别费</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="wechatPayment-content">
      <div class="title">
        设备识别费
      </div>
      <div>
        <span class="text">剩余费用：
          <span class="num">142.00元</span>
        </span>
        <el-button round color="#0071bb" @click="onRecharge()">视觉费充值</el-button>
      </div>
      <div class="rule">
        使用规则：每笔订单有识别的商品，则按￥0.1/￥0.06扣除
      </div>
      <!-- 表格 -->
      <div class="content tables">
         <div class="search">
             <el-form :inline="true" :model="formInline"  style="width:100%;display: flex;">
                <el-form-item label="时间段">
                 <el-time-picker  v-model="formInline.time"  is-range  range-separator="-"  start-placeholder="开始时间"  end-placeholder="结束时间"/>
                </el-form-item>
                <el-form-item label="设备名称/编号">
                  <el-input v-model="formInline.no" placeholder="请输入订单编号" ></el-input>
                </el-form-item>
                <span class="btn">
                 <el-button round color="#0071bb" :icon="Search">搜索</el-button>
                 <el-button round  :icon="RefreshLeft">重置</el-button>
			     	      <el-button round :icon="Refresh">刷新</el-button>
                 <el-button round color="#0071bb">导出列表</el-button>
                 <el-dropdown :hide-on-click="false">
                  <span class="el-dropdown-link">
                    <el-button round color="#0071bb" :icon="Setting" style="margin:0 10px">筛选</el-button> </span>
                  <template #dropdown>
                    <el-dropdown-menu style="max-height:300px">
                      <el-dropdown-item v-for="(item, index) in checkArr" :key="index"
                        @click.stop="filterTableData(item)">
                        <el-checkbox v-model="item.show" size="large" :label="item.label" />
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
               </span>
             </el-form>
             <div class="tip">
              费用汇总：根据您筛选的时间和设备汇总，已使用￥0.00
             </div>
         </div>
				<el-table :data="tableData" style="width: 100%">
					<!-- <el-table-column prop="time" label="日期" />
					<el-table-column prop="name" label="设备名称" />
					<el-table-column prop="contedeviceNont" label="设备编号" />
					<el-table-column prop="businessNO" label="业务订单号"/>
					<el-table-column prop="type" label="设备类型" /> -->
                      <!-- 动态表头 -->
                      <el-table-column :prop="item.prop" :label="item.label" v-for="(item, index) in headerArr" :key="index">
              <template #default="scope" v-if="item.prop == 'price'">
                <span>¥ {{ scope.row.price }}</span>
              </template>
            </el-table-column>
				</el-table>
			</div>
      <!-- 底部分页 -->
			<div class="page_number">
				<el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"  :size="size"
					:disabled="disabled"  layout="prev, pager, next, jumper,total" :total="10"
					@size-change="handleSizeChange" @current-change="handleCurrentChange"/>
			</div>
    </div>
    <!-- 视觉费充值 -->
    <Recharge v-if="show" @close="onClose()" @submit="onSubmit()"></Recharge>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Refresh, Search, RefreshLeft, HelpFilled, Setting } from "@element-plus/icons-vue";
import Recharge from './components/recharge.vue'
const currentPage = ref(1);
const pageSize = ref(1);
const disabled = ref(false)
// 入账记录表格数据
const tableData = [
	{
		id: '1',
		deviceNo:"81545116465131632",
    businessNO:'5225525522222585',
    time:'2024-05-10',
    name:'新颜路1号',
    type:'零售柜'
	},
]
const formInline = ref({
  time: '',
  no: ''
})
const handleSizeChange = (val : number) => {
	console.log(`${val} items per page`)
}
const handleCurrentChange = (val : number) => {
	console.log(`current page: ${val}`)
}
const show = ref(false)
const onRecharge = () => {
  show.value = true
}
// 提交
const onSubmit = () => {
	show.value = false
}
// 关闭提现弹窗
const onClose = () => {
	show.value = false
}
// 选中的属性
const checkArr = ref<any>([
  { label: '日期', prop: 'time', show: true },
  { label: '设备名称', prop: 'name', show: true },
  { label: '设备编号', prop: 'contedeviceNont', show: true },
  { label: '业务订单号', prop: 'businessNO', show: true },
  { label: '设备类型', prop: 'type', show: true },
])
// 表头
const headerArr = ref<any>([
  { label: '日期', prop: 'time', show: true },
  { label: '设备名称', prop: 'name', show: true },
  { label: '设备编号', prop: 'contedeviceNont', show: true },
  { label: '业务订单号', prop: 'businessNO', show: true },
  { label: '设备类型', prop: 'type', show: true },
])
// 点击触发方法
const filterTableData = (item: any) => {
  setTimeout(() => {
    headerArr.value = checkArr.value.filter((item: any) => item.show == true)
  }, 500)
}
</script>

<style scoped lang="scss">
.wechatPayment-page{
	padding: 20px 10px;
	box-sizing: border-box;
  background-color: #f1f1f1;
}
.wechatPayment-content{
	padding: 10px;
  background:#fff;
  margin-top:20px;
  border-radius:4px;
}
.rule{
  padding: 10px 20px;
  background: #00ffff;
  color: #4D4D4D;
  margin: 20px 0;
  font-size: 12px;
}
.title{
  margin-bottom: 10px;
  color: #4D4D4D;
  font-weight: 500;
  font-size: 16px;
}
.text{
  color: #4D4D4D;
  margin-right: 20px;
}
.num{
  font-size: 16px;
  font-weight: 500;
}
.tip{
  font-size: 12px;
  color: #4D4D4D;
  margin: 10px 0;
}

</style>